---
title: Slide
description: "`Slide` is a component that shows or hides an element from the corners of the page."
storybook: components-slide--basic
source: components/slide
style: components/slide/slide.style.ts
---

```tsx preview functional client
const [open, { toggle }] = useBoolean()

return (
  <>
    <Button onClick={toggle}>Please Click</Button>

    <Slide open={open} placement="block-end">
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button alignSelf="flex-end" onClick={toggle}>
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)
```

## Usage

:::code-group

```tsx [package]
import { Slide } from "@yamada-ui/react"
```

```tsx [alias]
import { Slide } from "@/components/ui"
```

```tsx [monorepo]
import { Slide } from "@workspaces/ui"
```

:::

```tsx
<Slide />
```

### Change Placement

To change the placement, set `placement` to `"block-start"`, `"block-end"`, `"inline-start"`, or `"inline-end"`. Default is `"inline-end"`.

```tsx preview functional client
const placements = ["block-start", "block-end", "inline-start", "inline-end"]
const [placement, setPlacement] = useState("inline-end")
const [open, { toggle }] = useBoolean()

return (
  <VStack>
    <Wrap gap="md">
      {placements.map((value) => (
        <Button
          key={value}
          onClick={() => setPlacement(value)}
          variant={placement === value ? "solid" : "outline"}
        >
          {value}
        </Button>
      ))}
    </Wrap>

    <Button onClick={toggle} alignSelf="flex-start">
      Please Click
    </Button>

    <Portal>
      <Slide open={open} placement={placement}>
        <VStack
          bg="bg.panel"
          h={placement.startsWith("inline") ? "full" : undefined}
          p="md"
          w={placement.startsWith("block") ? "full" : undefined}
        >
          <Text color="bg.contrast">
            クリリンのことか……クリリンのことかーーーっ！！！！！
          </Text>

          <Button alignSelf="flex-end" onClick={toggle}>
            Close
          </Button>
        </VStack>
      </Slide>
    </Portal>
  </VStack>
)
```

### Change Duration

To change the duration, set a number (in seconds) to `duration`. Default is `{ enter: 0.4, exit: 0.3 }`.

```tsx preview functional client
const [open, { toggle }] = useBoolean()

return (
  <>
    <Button onClick={toggle}>Please Click</Button>

    <Slide duration={0.7} open={open} placement="block-end">
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button alignSelf="flex-end" onClick={toggle}>
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)
```

### Unmount on Exit

To unmount the component when it is not visible, set `unmountOnExit` to `true`.

```tsx preview functional client
const [open, { toggle }] = useBoolean()

return (
  <>
    <Button onClick={toggle}>Please Click</Button>

    <Slide open={open} placement="block-end" unmountOnExit>
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button alignSelf="flex-end" onClick={toggle}>
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)
```

### Delay

If you want to delay the switch, set a numerical value (seconds) to `delay`.

```tsx preview functional client
const [open, { toggle }] = useBoolean()

return (
  <>
    <Button onClick={toggle}>Please Click</Button>

    <Slide delay={0.3} open={open} placement="block-end">
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button alignSelf="flex-end" onClick={toggle}>
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)
```

## Props

<PropsTable name="slide" />
